<script setup>
import { RouterLink, RouterView } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import player from './components/player.vue';
</script>

<template>
  <el-container style="height: calc(100vh - 16px);">
    <el-header height="100px" class="headerBox borderVisible">
      <div>
        <el-link :underline="false" :style="[{fontSize:'24px'}, {color : !loggedin? 'var(--el-link-disabled-text-color)' : homeActive ? 'var(--el-color-primary)':'var(--el-link-text-color)'}]"
          :disabled="!loggedin" @click="goToHome">HOME</el-link>
        <el-link :underline="false" :style="[{fontSize:'24px'}, {color : !loggedin? 'var(--el-link-disabled-text-color)' : allActive ? 'var(--el-color-primary)':'var(--el-link-text-color)'}]"
          :disabled="!loggedin" @click="goToAll">ALL</el-link> 
        <el-link :underline="false" :style="[{fontSize:'24px'}, {color : !loggedin? 'var(--el-link-disabled-text-color)' : libraryActive ? 'var(--el-color-primary)':'var(--el-link-text-color)'}]"
          :disabled="!loggedin" @click="goToLibrary">LIBRARY</el-link>
        <el-link :underline="false" :style="[{fontSize:'24px'}, {color : !loggedin? 'var(--el-link-disabled-text-color)' : musicActive ? 'var(--el-color-primary)':'var(--el-link-disabled-text-color)'}]"
          :disabled="true" @click="goToMusic">MUSIC</el-link>
        
      </div>
      <div style="display: flex; justify-content: center; position: absolute; top: calc(8px + 7px + 25px); right: 40px;">
        <el-link v-if="!loggedin" :underline="false"
          style="font-size: 24px;" @click="this.$router.push('/')">LOGIN</el-link>
        <!-- <el-link v-if="loggedin" :underline="false"
          style="font-size: 24px;" @click="handleLogout">LOGOUT</el-link> -->
        <el-dropdown>
          <el-avatar v-if="loggedin" :size="64" style="font-size: 20px;">{{ avatarName }}</el-avatar>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleEdit">Edit Profile</el-dropdown-item>
              <el-dropdown-item v-if="currentUserRoleId=='2'" @click="handleUpload">Upload Music</el-dropdown-item>
              <el-dropdown-item v-if="currentUserRoleId=='2'" @click="handleManage">Manage Your Music</el-dropdown-item>
              <el-dropdown-item v-if="currentUserRoleId=='3'" @click="handleReview">Review</el-dropdown-item>
              <el-dropdown-item @click="handleLogout">Logout</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

      </div>
    </el-header>

    <el-main class="borderVisible" style="padding: 0;overflow: hidden;">
      <router-view v-slot="{ Component }" @login="loggedin = true && goToHome" @setAva="setAvatar">
        <Transition mode="out-in">
          <component :is="Component" @goToMusic="goToMusic" @handleLikeMusic="handleLikeMusic" @handlePlayMusic="handlePlayMusic" :currentSongId="currentSongId" :currentAlbumId="currentAlbumId" :currentUserId="currentUserId"/>
        </Transition>
      </router-view>
    </el-main>

    <el-footer height="100px" class="borderVisible">
      <div v-if="loggedin">
        <!-- <player :playingSongId="playingSongId"
          :currentAlbumId="2"
          currentAlbumName="范特西"
          currentSong="简单爱"
          currentSinger="周杰伦">
        </player> -->
        <player :playingSongId="playingSongId">
        </player>
      </div>
      <!-- <div>
        <el-button @click="handleLogout">logout</el-button>
      </div> -->
    </el-footer>
  </el-container>
</template>

<script>
export default {
  name: 'app',
  components: {
    player
  },
  data() {
    return {
      loggedin: false,
      avatarName: '',
      homeActive: true,
      musicActive: false,
      allActive: false,
      libraryActive: false,
      currentSongId: '',
      currentAlbumId: '',
      currentUserId: -1,
      currentUserRoleId: -1,
      playingSongId: 1,
    }
  },
  methods: {
    goToHome() {
      if (this.loggedin) {
        this.homeActive = true
        this.musicActive = false
        this.allActive = false
        this.libraryActive = false
        this.$router.push('/home')
      } else {
        ElMessage({
          message: 'Please Login First',
          type: 'error',
        })
        this.$router.push('/')
      }
    },
    goToLibrary() {
      this.homeActive = false
      this.musicActive = false
      this.allActive = false
      this.libraryActive = true
      this.$router.push('/library')
    },
    goToAll() {
      this.homeActive = false
      this.musicActive = false
      this.libraryActive = false
      this.allActive = true
      this.$router.push('/all')
    },
    goToMusic(songId, albumId) {
      this.homeActive = false
      this.musicActive = true
      this.allActive = false
      this.libraryActive = false
      if (songId) {
        this.currentSongId = songId
      }
      if (albumId) {
        this.currentAlbumId = albumId
      }
      this.$router.push({
        name: 'music'
      })
    },
    handleLikeMusic(songId) {
      // console.log(this.currentUserId, 'like', songId)
      axios({
        method: 'post',
        url: '/api/addSongToLibrary',
        params: {
          'userid': this.currentUserId,
          'songid': songId
        }
      }).then((res) => {
        if (res.data.success) {
          ElMessage({
            message: 'Successfully LIKED!',
            type: 'success'
          })
        }
      })
    },
    handlePlayMusic(songId) {
      this.playingSongId = songId
    },
    handleLogout() {
      axios({
        method: 'post',
        url: '/api/logout'
      }).then((res) => {
        if (res.data.success) {
          this.loggedin = false
          this.$router.push('/')
          ElMessage({
            message: 'Successfully logout',
            type: 'success',
          })
        }
      })
    },
    setAvatar(username, id, roleid) {
      this.avatarName = username[0],
      this.currentUserId = id
      this.currentUserRoleId = roleid
    },
    handleEdit() {
      this.homeActive = false
      this.musicActive = false
      this.allActive = false
      this.libraryActive = false
      this.$router.push('/edit')
    },
    handleUpload() {
      this.homeActive = false
      this.musicActive = false
      this.allActive = false
      this.libraryActive = false
      this.$router.push('/upload')
    },
    handleManage() {
      this.homeActive = false
      this.musicActive = false
      this.allActive = false
      this.libraryActive = false
      this.$router.push('/manage')
    },
    handleReview() {
      this.homeActive = false
      this.musicActive = false
      this.allActive = false
      this.libraryActive = false
      this.$router.push('/review')
    },
  }
}
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC&display=swap');
* {
  font-family: 'Poppins', 'Noto Serif SC', sans-serif;
  /* font-family: 'Noto Serif SC', serif; */
}

.borderVisible {
  /* border: 1px solid grey; */
  /* overflow: hidden; */
}

.headerBox {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-link {
  margin-right: 20px;
  position: relative;
  transition: 0.3s ease;
}

.el-link::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 0%;
  height: 3px;
  border-radius: 4px;
  background-color: #409EFF;
  transition: 0.3s ease;
  color:#409EFF;
}

.el-link:hover::before {
  width: 100%;
  left: 0;
}

.v-enter-active,
.v-leave-active {
  transition: opacity 0.3s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
